<template>
  <view class="index">
    <nut-swiper
      :pagination-visible="true"
      pagination-color="#426543"
      auto-play="3000"
    >
      <nut-swiper-item>
        <img
          src="cloud://dev-304ml.6465-dev-304ml-1300481250/banner/banner2.jpg"
          alt=""
        />
      </nut-swiper-item>
      <nut-swiper-item>
        <img
          src="cloud://dev-304ml.6465-dev-304ml-1300481250/banner/banner1.jpg"
          alt=""
        />
      </nut-swiper-item>
    </nut-swiper>
    <nut-cell title="场景" is-link></nut-cell>
    <nut-grid :column-num="3" :gutter="20" icon-color="#fa2c19">
      <nut-grid-item icon="home" text="回家模式"></nut-grid-item>
      <nut-grid-item icon="footprint" text="离家模式"></nut-grid-item>
      <nut-grid-item icon="notice" text="睡眠模式"></nut-grid-item>
    </nut-grid>
    <nut-divider>常用设备</nut-divider>
    <nut-grid v-if="devices.length > 0" :column-num="2" :border="false">
      <nut-grid-item v-for="d in devices" :key="d.id">
        <device :data="d"></device>
      </nut-grid-item>
    </nut-grid>
    <nut-grid v-else :border="false" :clickable="true">
      <nut-grid-item
        icon="uploader"
        text="添加设备"
        @click="toAddDevice()"
      ></nut-grid-item>
    </nut-grid>
    <div style="height: 100px"></div>

    <nut-tabbar @tab-switch="pages.tabSwitch" :bottom="true">
      <nut-tabbar-item
        tab-title="首页"
        icon="home"
        :to="pages.home"
      ></nut-tabbar-item>
      <nut-tabbar-item
        tab-title="设备"
        icon="category"
        :to="pages.devices"
      ></nut-tabbar-item>
      <nut-tabbar-item
        tab-title="我的"
        icon="my"
        :to="pages.my"
      ></nut-tabbar-item>
    </nut-tabbar>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import { reactive, toRefs, ref } from "vue";
import httpService from "../../services/httpService";
import pages from "../../services/pageConfig";
import device from "../../components/device.vue";

export default {
  name: "Index",
  components: { device },
  unmounted() {
    httpService.removePullDevice("index", null);
  },
  setup() {
    const state = reactive({});
    function tabSwitch(item, index) {
      console.log(item, index);
    }
    const devices = ref([]);

    function getRecentDevices() {
      httpService.get("/space/myRecentDevices").then((res) => {
        if (res.statusCode == 200) {
          devices.value = res.data;
          devices.value.forEach((d) => {
            httpService.addPullDevice("index", d.deviceId);
            httpService.pullDeviceInfo("index", d);
          });
        }
      });
    }
    getRecentDevices();

    function toAddDevice() {
      Taro.reLaunch({
        url: "/pages/device/index",
      });
    }

    return {
      ...toRefs(state),
      tabSwitch,
      devices,
      tabSwitch,
      toAddDevice,
      pages,
    };
  },
};
</script>

<style lang="scss">
.nut-swiper-item {
  line-height: 150px;
  img {
    width: 100%;
    height: 100%;
  }
}
.device {
  max-width: 45vw;
  height: 180px;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.1);
  text-align: center;
  color: #333;
  img {
    max-width: 70%;
    max-height: 60%;
  }
  .name {
    width: 100%;
    font-size: 18px;
    margin-bottom: 10px;
  }
}

.state {
  height: 10px;
  width: 100%;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  // border-bottom: 1px solid rgba(170, 170, 170, 0.54);
  font-size: 8px;
  line-height: 10px;
  color: #fff;
  text-align: center;
}
.state.online {
  background-color: #0daf0170;
}
.state.offline {
  background-color: #98989870;
}
</style>
